<template>
    <el-card shadow="never" :body-style="bodyStyle">
        <el-form :label-position="labelPosition" :label-width="labelWidth" label-suffix="：">
            <el-row :gutter="20" type="flex" justify="center">
                <div>
                    <el-col>
                        <span class="condition-title">{{$t('message.filterCondition')}}</span>
                    </el-col>
                </div>
                <el-col style="flex: 1;" :class="col1"></el-col>
                <el-col style="flex: 1;" :class="col2"></el-col>
                <div
                    :style="isExpand?{margin:'0 10px 18px 0'}:{margin:`0 0 0 ${labelWidth}`}"
                    id="btn-list"
                    class="no-bottom no-right"
                >
                    <el-button v-if="showResetBtn" @click="reset">{{$t('message.reset')}}</el-button>
                    <el-button
                        v-if="showSearchBtn"
                        @click="search"
                        type="primary"
                    >{{$t('message.filter')}}</el-button>
                    <slot name="other-btn" v-if="isExpand"></slot>
                </div>
            </el-row>
            <div v-show="isExpand" class="condition-slot">
                <slot></slot>
            </div>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: "QueryCard",
    props: {
        labelWidth: {
            default: "100px"
        },
        labelPosition: {
            default: "right"
        },
        showResetBtn: {
            default: true
        },
        showSearchBtn: {
            default: true
        },
        bodyStyle: {
            default: "padding: 24px;"
        }
    },
    data() {
        return {
            col1: "col-" + Math.floor(Math.random() * 10000),
            col2: "col-" + Math.floor(Math.random() * 10000)
        };
    },
    mounted() {
        let cols = this.$el.querySelectorAll(
                ".condition-slot .el-row .el-col"
            );
            if (cols.length >= 2) {
                this.$el
                    .querySelector("." + this.col1)
                    .appendChild(cols[0].firstChild);
                this.$el
                    .querySelector("." + this.col2)
                    .appendChild(cols[1].firstChild);
            } else if (cols.length == 1) {
                this.$el
                    .querySelector("." + this.col1)
                    .appendChild(cols[0].firstChild);
            }
    },
    methods: {
        search() {
            this.$emit("search");
        },
        reset() {
            this.$emit("reset");
        }
    }
};
</script>

<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.condition-expand {
    color: #3a7fe8;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
}
</style>
